<template>
    <div class="activityText">
        <scroll class="activity-text-wrapper" v-show="DetailList.coverimg">
            <div>
                <!-- 场馆信息 -->
                <div class="banner">
                    <img :src="DetailList.coverimg" alt="" />
                </div>
                <div class="banner-text">
                    <p class="banner-title">{{DetailList.title}}{{id}}</p>
                    <p class="banner-address">地址：{{DetailList.address}}</p>
                </div>
                <split></split>
                <!-- 场馆详情 -->
                <div class="detail-wrapper">
                    <div class="detail-title">
                        <i class="icon"></i>
                        <span class="text">活动详情</span>
                    </div>
                    <div class="detail-content" :class="{active: moreFlag && DetailNews != null}" v-html="DetailList.content">
                    </div>
                    <a href="javascript:;" class="detail-more" v-show="moreFlag && DetailNews != null" @click="handleClickMore">
                        <span class="text">展开更多</span>
                        <i class="icon"></i>
                    </a>
                </div>
                <split v-show="DetailNews != null"></split>
                <div class="detail-news" v-show="DetailNews != null">
                    <div class="news-title">
                        <span class="text">活动新闻</span>
                    </div>
                    <div class="news-container">
                        <ul class="news-item">
                            <li @click.stop="handleClickDetail(item.id, item.ctype, item.sourceurl)" class="news-list" v-for="(item, index) in DetailNews" :key="item.id">
                                <div class="left">
                                    <img class="img" v-lazy="item.coverimg" alt="" />
                                </div>
                                <div class="right">
                                    <p class="list-title">{{item.title}}</p>
                                    <p class="list-time">{{item.createtime}}</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </scroll>
        <!-- 请求数据loading -->
        <div class="loading-wrapper" v-show="!DetailList.coverimg">
            <loading></loading>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import Vue from 'vue'
    import Loading from 'base/loading/loading'
    import Split from 'base/split/split'
    import Scroll from 'base/scroll/scroll'
    import { Toast } from 'vant'
    import { Dialog } from 'vant'

    export default {
        data () {
            return {
                DetailList: {},
                DetailNews: [],
                id: "001",
                loveText: "收藏",
                cancelLoveText: "取消收藏",
                moreFlag: true
            }
        },
        methods: {
            handleClickMore () {
                this.moreFlag = false
            },
            handleClickDetail (id, flag, url) {
                if (flag === "1") {
                    this.$router.push({
                        path: '/activityArticle/' + id
                    })
                } else {
                    window.location.href = url
                }
            },
            getDetailInfo () {
                axios.post('/api/index.php?g=Api&m=Ucenter&a=activedetail', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    actid: this.$route.params.id
                }).then((res) => {
                    if (res.data.rescode === "0000") {
                        this.DetailList = res.data.data
                    } else {

                    }
                }).catch(function (error) {
                    console.log(error)
                })
            },
            getDetailText () {
                axios.post('/api/index.php?g=Api&m=Ucenter&a=actreportlist', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    actid: this.$route.params.id
                }).then((res) => {
                    console.log(res)
                    if (res.data.rescode === "0000") {
                        this.DetailNews = res.data.data.list
                    } else {

                    }
                }).catch(function (error) {
                    console.log(error)
                })
            }
        },
        components: {Loading,Split,Scroll},
        created () {
            this.id = this.$route.params.id
            this.getDetailInfo()
            this.getDetailText()
        }
    }
</script>

<style lang="stylus">
    @import '~common/stylus/mixins.styl'
    
    .activityText
        position: relative
        top: 0
        left: 0
        width: 100%
        height: 100%
        overflow: hidden
        background: #fff
        box-sizing: border-box
        .loading-wrapper
            position: absolute
            width: 100%
            top: 50%
            -webkit-transform: translateY(-50%)
            transform: translateY(-50%)
            z-index: 9
        .activity-text-wrapper
            width: 100%
            height: 100%
            overflow: hidden
            position: absolute
            top: 0
            bottom: 0
            .banner
                width: 100%
                height: 185px
                img
                    width: 100%
                    height: 100%
            .banner-text
                width: 100%
                height: 70px
                padding: 0 15px
                box-sizing: border-box
                overflow: hidden
                .banner-title
                    margin-top: 16px
                    width: 100%
                    ellipsis()
                .banner-address
                    font-size: 14px
                    color: #0094d4
                    margin-top: 10px
            .detail-wrapper
                width: 100%
                padding: 0 15px
                background: #fff
                box-sizing: border-box
                .detail-title
                    width: 100%
                    height: 40px
                    font-size: 0
                    border-bottom: 1px solid #eee
                    padding-top: 15px
                    box-sizing: border-box
                    .icon
                        background: url('./icon1.png') no-repeat
                        width: 15px
                        height: 10px
                        background-size: 100% 100%
                        display: inline-block
                        vertical-align: middle
                    .text
                        font-size: 16px
                        color: #0094d4
                        display: inline-block
                        vertical-align: middle
                        margin-left: 10px
                .detail-content
                    font-size: 14px
                    color: #888
                    line-height: 150%
                    padding: 15px 0
                    box-sizing: border-box
                    &.active
                        height: 120px
                        overflow: hidden
                .detail-more
                    width: 100%
                    height: 30px
                    line-height: 30px
                    background: #87ceeb
                    display: block
                    margin-top: 6px
                    text-align: center
                    font-size: 0
                    .text
                        color: #fff
                        font-size: 16px
                        display: inline-block
                        vertical-align: middle
                    .icon
                        background: url('./more-icon.png') no-repeat
                        display: inline-block
                        width: 12px
                        height: 8px
                        background-size: 100% 100%
                        vertical-align: middle
                        margin-left: 4px
            .detail-news
                width: 100%
                background: #fff
                .news-title
                    background: url('./news-title.png') no-repeat
                    width: 100%
                    height: 30px
                    background-size: 100% 100%
                    .text
                        display: block
                        line-height: 30px
                        padding-left: 20px
                        font-size: 16px
                        color: #fff
                .news-container
                    width: 100%
                    padding: 0 15px
                    box-sizing: border-box
                    overflow: hidden
                    padding-bottom: 40px
                    background: #fff
                    .news-item
                        .news-list
                            width: 100%
                            height: 100px
                            border-bottom: 1px solid #eee
                            box-sizing: border-box
                            display: flex
                            align-items: center
                            overflow: hidden
                            position: relative
                            .left
                                width: 100px
                                flex: 0 0 100px
                                margin-right: 10px
                                .img
                                    width: 100%
                            .right
                                flex: 1
                                .list-title
                                    font-size: 16px
                                    line-height: 130%
                                .list-time
                                    font-size: 12px
                                    color: #888
                                    margin-top: 6px
            .detail-btn
                margin-top: 40px
                height: 38px
                font-size: 0
                padding-bottom: 40px
                .detail-btn-item
                    width: 40%
                    background: #0094d4
                    height: 38px
                    display: inline-block
                    font-size: 16px
                    margin-left: 7%
                    line-height: 38px
                    text-align: center
                    color: #fff
                    border-radius: 20px
                    &.love-btn
                        background: #f8624a
                
</style>